<template>
	<view>
		<view class="mask" @tap="maskTouch" :style="{ opacity: show ? '1' : '0', visibility: show ? 'visible' : 'hidden' }"></view>
		<view class="main-box" :style="{ transform: show ? 'translateY(0)' : 'translateY(100%)' }">
			<view class="top-box">
				<view style="display: flex;width: 38%;">
					<view class="top-btn" :style="{'width': '33.33%','color':btnColors[0]}" @tap="cancle" v-if="btnShowControls[0]">取消</view>
					<view class="top-btn" :style="{'width': '33.33%','color':btnColors[1]}" @tap="selectAll" v-if="btnShowControls[1]">全选</view>
					<view class="top-btn" :style="{'width': '33.33%','color':btnColors[2]}" @tap="clearAll" v-if="btnShowControls[2]" >清空</view>
				</view>
				<view class="top-btn" @tap="sure" :style="{'color':btnColors[3]}">确定</view>
			</view>
			<view class="scroll-box" :style="{'height':scrollHeight + 'rpx'}">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view class="item-group" :style="{'justify-content':isNeedMove?'center':''}">
						<view class="scroll-item" @tap="addTarget(item)" v-for="(item, index) in list" :key="index" :style="{'color':isChoosed(item[idKey])?activeColor:contentTextColor,'font-size':contentFontSize,'height':itemHeight + 'rpx'}">
							{{ item[showKey] }}
							<view class="tick" :style="{'color':activeColor}" v-if="isChoosed(item[idKey])">√</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'z-multi-choose',
	props: {
		show: {
			type: Boolean,
			default: false
		},
		list:{
			type:Array,
			default:[]
		},
		showKey:{
			type:String,
			default:'text'
		},
		idKey:{
			type:String,
			default:'id'
		},
		activeColor:{
			type:String,
			default:'#007aff'
		},
		scrollHeight:{
			type:Number,
			default:500
		},
		btnShowControls:{
			type:Array,
			default:()=>{
				return [true,true,true,true]
			}
		},
		btnColors:{
			type:Array,
			default:()=>{
				return ['#007aff','#007aff','#007aff','#007aff']
			}
		},
		contentTextColor:{
			type:String,
			default:'#111111'
		},
		contentFontSize:{
			type:String,
			default:'28rpx'
		},
		itemHeight:{
			type:Number,
			default:100
		},
		selectedData: {
			type:  [Number,String,Array,Object],
			default:[]
		},
	},
	watch: {
		// selectedData(val, oldVal) {
		// 	if(Array.isArray(val)){
		// 		this.idArr = val;
		// 	}else{
		// 		this.idArr = val.split(",");
		// 	}
			
		// }
	},
	computed:{
		isNeedMove(){
			return !(this.itemHeight*this.list.length > this.scrollHeight)
		}
	},
	mounted() {
		this.defaultSelect()
	},
	data() {
		return {
			idArr: [],
		};
	},
	methods: {
		defaultSelect(){
			if(Array.isArray(this.selectedData)){
				this.idArr = this.selectedData;
			}else{
				this.idArr = this.selectedData.split(",");
			}
		},
		isChoosed(id){
			return this.idArr.includes(id)
		},
		addTarget(item) {
			if (this.idArr.includes(item[this.idKey])) {
				this.idArr.splice(this.idArr.indexOf(item[this.idKey]), 1);
			} else {
				this.idArr.push(item[this.idKey]);
			}
		},
		maskTouch(){
			this.$emit('maskTouch')
		},
		cancle(){
			this.$emit('cancle')
		},
		sure(){
			let textArr = []
			this.list.forEach(item=>{
				this.idArr.includes(item[this.idKey]) && textArr.push(item[this.showKey])
			})
			this.$emit('sure',{
				idArr:this.idArr,
				textArr
			})
		},
		selectAll(){
			let idArr = []
			this.list.forEach(item=>{
				idArr.push(item[this.idKey])
			})
			this.idArr = idArr
		},
		clearAll(){
			this.idArr = []
		}
	}
};
</script>

<style>
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 98;
	background-color: rgba(0, 0, 0, 0.6);
	opacity: 1;
	visibility: visible;
	transition: all 0.3s;
}
.main-box {
	width: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	border-radius: 26rpx 26rpx 0 0;
	z-index: 99;
	transform: translateY(100%);
	transition: all 0.3s;
	overflow: hidden;
}
.top-box {
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	box-sizing: border-box;
	position: relative;
}
.top-box::after{
	position: absolute;
	content: '';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1rpx;
	transform: scaleY(0.5);
	background-color: #f1f1f1; 
}
.top-btn {
	color: #007aff;
}
.scroll-box {
	padding: 0 30rpx;
	box-sizing: border-box;
}
.item-group{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.scroll-item {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	flex-shrink: 0;
}
.tick {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
}
</style>
